//导入需要的样式
import variable from "@/style/variables.module.scss";
export const useThemeSettingStore = defineStore(
  "themeSettingStore",
  () => {
    //定义响应式数据
    const themeState = reactive({
      theme: variable.theme, // 先取出默认颜色,现在系统正在使用的颜色
      originTheme: "", //主体生效之后，存储的颜色
      isChange: false
    });

    type TypeTheme = typeof themeState; //获取themeState对象的类型TypeTheme = {theme:string,originTheme:string}

    /*
      keyof运算符接收一个对象类型，并返回其所有键的联合类型
      interface UserInfo {
        name: string;
        age: number;
      }
      type Keys = keyof UserInfo; // 返回 "name" | "age"
    */
    type themeKeys = keyof TypeTheme; //themeKeys = theme | originTheme | isChange

    const changeTheme = <T extends themeKeys>({
      key,
      value
    }: {
      key: T;
      value: TypeTheme[T];
    }) => {
      console.log("------", key, value);
      themeState[key] = value;
    };

    return {
      themeState,
      changeTheme
    };
  },
  {
    persist: {
      storage: localStorage,
      pick: ["themeState.theme", "themeState.originTheme"]
    }
  }
);
